<template>
  <div class="company-info">
    <header class="header-box">
      <div class="logo-name">
        <n-avatar :size="100" :src="companyLogo" />
        <div class="info-box">
          <b class="title">{{ companyInfo.name }}</b>
          <n-gradient-text type="info">
            已发布职位数：{{ companyInfo.jobs ? companyInfo.jobs.length : 0 }}
          </n-gradient-text>
        </div>
      </div>
      <n-button
        type="info"
        size="large"
        class="opreate-btn"
        @click="publishJob"
      >
        发布职位
      </n-button>
    </header>

    <div class="content">
      <div class="left-box">
        <n-card title="关于公司">
          <i v-html="companyInfo.about"></i>
        </n-card>
        <n-card title="公司图鉴">
          <n-image-group>
            <n-space>
              <n-image
                width="500"
                v-for="(item, index) in companyInfo.pictures"
                :key="index"
                :src="getPictureURL(item.img_url)"
              ></n-image>
            </n-space>
          </n-image-group>
        </n-card>
        <n-card title="职位">
          <n-data-table
            :columns="columns"
            :data="jobList"
            :pagination="false"
            :bordered="false"
          />
        </n-card>
      </div>
      <div class="right-box">
        <n-card class="company-msg">
          <n-grid :x-gap="12" :y-gap="8" :cols="1">
            <n-grid-item class="msg-item">
              <b class="msg-title">创建时间：</b>
              <b>{{ companyInfo.creation_date }}</b>
            </n-grid-item>
            <n-grid-item class="msg-item">
              <b class="msg-title">联系方式：</b>
              <b>{{ companyInfo.tel }}</b>
            </n-grid-item>
            <n-grid-item class="msg-item">
              <b class="msg-title">邮箱：</b>
              <b>{{ companyInfo.email }}</b>
            </n-grid-item>
            <n-grid-item class="msg-item">
              <b class="msg-title">网站：</b>
              <n-button
                text
                tag="a"
                :href="companyInfo.website"
                target="_blank"
                type="primary"
              >
                {{ companyInfo.website }}</n-button
              >
            </n-grid-item>
            <n-grid-item class="msg-item">
              <b class="msg-title">地址：</b>
              <b>{{ companyInfo.address }}</b>
            </n-grid-item>
          </n-grid>
        </n-card>
        <n-card title="收到的简历">
          <n-data-table
            :columns="columns2"
            :data="resumeList"
            :pagination="false"
            :bordered="false"
          />
        </n-card>
      </div>
    </div>
  </div>
  <n-back-top :right="100" />
</template>

<script setup>
import { getCompanyInfoAPI, getResumeListAPI } from "@/http/api/company"
import { h, ref, onMounted, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import { NButton, NTag } from "naive-ui"
import moment from "moment"

const route = useRoute()
const router = useRouter()
const companyInfo = ref({})

const companyLogo = computed(() => {
  return process.env.VUE_APP_SERVER + companyInfo.value.logo
})

const createColumns = ({ show }) => {
  return [
    {
      title: "职位码",
      key: "id",
    },
    {
      title: "职位",
      key: "name",
    },
    {
      title: "工作地点",
      key: "city",
    },
    {
      title: "发布时间",
      key: "create_time",
    },
    {
      title: "状态",
      key: "status",
      render(row) {
        if (row.status == 0) {
          return h(
            NTag,
            {
              type: "default",
            },
            {
              default: () => "已结束",
            }
          )
        } else {
          return h(
            NTag,
            {
              type: "success",
            },
            {
              default: () => "招聘中",
            }
          )
        }
      },
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return h(
          NButton,
          {
            strong: true,
            type: "primary",
            size: "small",
            onClick: () => show(row),
          },
          { default: () => "查看" }
        )
      },
    },
  ]
}

const createColumns2 = ({ toResumeDetail }) => {
  return [
    {
      title: "简历编号",
      key: "id",
    },
    {
      title: "应聘职位",
      key: "apply_job",
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return h(
          NButton,
          {
            strong: true,
            type: "primary",
            size: "small",
            onClick: () => toResumeDetail(row),
          },
          { default: () => "查看" }
        )
      },
    },
  ]
}

const columns2 = createColumns2({
  toResumeDetail(row) {
    console.log(row)
    router.push({
      name: "CHECKRESUME",
      params: {
        uid: row.user_id,
        cid: row.company_id,
        jobname: row.apply_job,
      },
    })
  },
})

const columns = createColumns({
  show(row) {
    router.push({
      path: "/job-detail",
      query: {
        id: row.id,
      },
    })
  },
})
const jobList = ref([])
const resumeList = ref([])
function getCompanyInfo() {
  getCompanyInfoAPI({ id: route.params.id }).then((res) => {
    companyInfo.value = res.result
    jobList.value = res.result.jobs.map((job) => {
      job.create_time = moment(job.create_time).format("YYYY年MM月DD日")
      // job.status = job.status == 0 ? '已关闭' : '招聘中';
      return job
    })
  })
}
// 获取公司简历列表
function getResumeList() {
  getResumeListAPI({ id: route.params.id })
    .then((res) => {
      // console.log(res.result)
      resumeList.value = res.result
    })
    .catch((err) => {
      console.log(err)
    })
}

function getPictureURL(url) {
  return process.env.VUE_APP_SERVER + url
}

function publishJob() {
  router.push({ path: `/publish-job/${route.params.id}` })
}
onMounted(() => {
  getCompanyInfo()
  getResumeList()
  // 公司id
  // console.log(route.params.id)
})
</script>
<style lang="scss" scoped>
.company-info {
  height: 100%;

  .header-box {
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo-name {
      display: flex;
      align-items: center;

      .info-box {
        height: 100px;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
          font-size: 24px;
          font-weight: bold;
        }
      }
    }

    .opreate-btn {
      margin-right: 10%;
    }
  }

  .content {
    display: flex;

    .right-box {
      width: 80%;
      margin-left: 20px;

      .company-msg {
        background-color: none;

        .msg-title {
          font-weight: bold;
        }

        .msg-item {
          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
        }
      }
    }
  }
}
</style>
